<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">


    <title>北京循一堂健康管理有限公司</title>

    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="./plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css">
    <link href="./plugins/bootstrap-datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
    <link href="./plugins/fullcalendar/dist/fullcalendar.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="./css/page.css" />
    <style>
        .bg-orange{
                background:#FFA500
            }
            .bg-cyan{
                background:#00FFFF 
            }
            </style>
</head>


<body class="fixed-left">
    <script src="./js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".tab").slide({ //切换新闻
                titCell: ".hd li",
                mainCell: ".bd",
                targetCell: ".more li",
                effect: "fade",
                autoPlay: false,
                trigger: "click",
                easing: "linear",
                delayTime: 0
            });

            $(".yylb .tab").slide({ //切换新闻
                titCell: ".hd li",
                mainCell: ".bd",
                targetCell: ".more li",
                effect: "fade",
                autoPlay: false,
                trigger: "click",
                easing: "linear",
                delayTime: 0
            });

        });

        function ScrollImgLeft() {
            var speed = 50;
            var scroll_begin = document.getElementById("scroll_begin");
            var scroll_end = document.getElementById("scroll_end");
            var scroll_div = document.getElementById("scroll_div");
            scroll_end.innerHTML = scroll_begin.innerHTML;

            function Marquee() {
                if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
                    scroll_div.scrollLeft -= scroll_begin.offsetWidth;
                else
                    scroll_div.scrollLeft++;
            }
            var MyMar = setInterval(Marquee, speed);
            scroll_div.onmouseover = function () {
                clearInterval(MyMar);
            }
            scroll_div.onmouseout = function () {
                MyMar = setInterval(Marquee, speed);
            }
        }
    </script>
    <div class="header">
        <div class="container right-b clearfix">
            <div class="logo fl"><img src="./images/logo.jpg" /></div>

            <div class="center fl">
                <div style="width:96%;height:21px;margin:0 auto;white-space: nowrap;overflow:hidden;" id="scroll_div"
                    class="scroll_div">
                    <div id="scroll_begin">
                        <a href="#" target="_blank"><i>·</i><span>请各位医生完善个人基本信息 <b>2018-07-26</b></span></a>
                        <a href="#" target="_blank"><i>·</i><span>请各位医生完善个人基本信息 <b>2018-07-26</b></span></a>
                        <a href="#" target="_blank"><i>·</i><span>请各位医生完善个人基本信息 <b>2018-07-26</b></span></a>
                        <a href="#" target="_blank"><i>·</i><span>请各位医生完善个人基本信息 <b>2018-07-26</b></span></a>
                    </div>
                    <div id="scroll_end"></div>
                </div>
                <script type="text/javascript">
                    ScrollImgLeft();
                </script>
            </div>

            <div class="data fr clearfix">
                <div class="tx">
                    <img src="./images/logo.jpg" alt="" height="50" />
                </div>
                <div class="name">
                    <button onclick="">退出登录</button>
                    <p>欢迎胡凤亮医生<button onclick="" id="name"></button></p>
                </div>


            </div>
        </div>
    </div>
    <div class="main clearfix">
        <div class="tab fl">

            <div class="bd container">
                <!-- Start content -->
                <div class="content" >
                    <div class="container">

                        <!-- Page-Title -->
                        <div class="row">
                            <div class="col-sm-12">
                                <h4 class="pull-left page-title"></h4>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-12">
                                <div id="external-events" class="m-t-12">
                                    <p>在日历中点击创建</p>
                                </div>
                                <div class="row">

                                    <div class="col-md-16">
                                        <div class="panel panel-default">
                                            <div class="panel-body">
                                                <div class="row">
                                                    <div class="col-md-12 col-sm-12 col-xs-12">
                                                        <div id="calendar"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!-- end col -->

                                </div> <!-- end row -->

                                <!-- BEGIN MODAL -->
                                <div class="modal fade none-border" id="event-modal">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title"><strong>添加工作计划</strong></h4>
                                            </div>
                                            <div class="modal-body"></div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-success save-event waves-effect waves-light">创建</button>
                                                <button type="button" class="btn btn-danger delete-event waves-effect waves-light"
                                                    data-dismiss="modal">删除</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Modal Add Category -->
                                <div class="modal fade none-border" id="add-category">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                                <h4 class="modal-title"><strong>创建</strong> 一个类别</h4>
                                            </div>
                                            <div class="modal-body">
                                                <form role="form">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <label class="control-label"> 类别名称 </label>
                                                            <input class="form-control form-white" placeholder="输入类别名称"
                                                                type="text" name="category-name">
                                                        </div>
                                                        <div class="col-md-6">
                                                            <label class="control-label"> 选择类别颜色 </label>
                                                            <select class="form-control form-white" data-placeholder="选择一种颜色..."
                                                                name="category-color">
                                                                <option value="bg-warning">黄色</option>
                                                                <option value="bg-success">绿色</option>
                                                                <option value="bg-primary">蓝色</option>
                                                                <option value="bg-orange">橙色</option>
                                                                <option value="bg-danger">红色</option>
                                                                <option value="bg-purple">紫色</option>
                                                                <option value="bg-cyan">青色</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">关闭</button>
                                                <button type="button" class="btn btn-danger waves-effect waves-light save-category"
                                                    data-dismiss="modal">保存</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- END MODAL -->

                            </div>
                            <!-- end col-12 -->
                        </div> <!-- end row -->

                    </div> <!-- container -->

                </div> <!-- content -->
            </div>
        </div>

    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="footer" style="left:0px">
        <p>版权所有 © 2018-2020 北京循一堂健康管理有限公司&nbsp;&nbsp;&nbsp;技术支持电话：010-62084321</p>
    </div>
    <script>
        var resizefunc = [];
    </script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./plugins/select/js/bootstrap-select.min.js"></script>

    <script src="./plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="./plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

    <script src="./plugins/bootstrap-datepicker/js/moment.js"></script>
    <script src="./plugins/bootstrap-datepicker/js/bootstrap-datetimepicker.min.js"></script>
    <!-- jQuery  -->
    <script src="./plugins/fullcalendar/dist/fullcalendar.min.js" type="text/javascript"></script>
    <script src="./plugins/fullcalendar/dist/zh-cn.js" type="text/javascript"></script>
    <script src="./js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">
        window.baseUrl = localStorage.getItem("baseUrl");
        window.moreSearch = "";
        //console.log(localStorage.getItem("Authorization"));
        ! function ($) {
            "use strict";

            var CalendarApp = function () {
                this.$body = $("body")
                this.$modal = $('#event-modal'),
                    this.$event = ('#external-events div.external-event'),
                    this.$calendar = $('#calendar'),
                    this.$saveCategoryBtn = $('.save-category'),
                    this.$categoryForm = $('#add-category form'),
                    this.$extEvents = $('#external-events'),
                    this.$calendarObj = null
            };


            /* on drop */
            CalendarApp.prototype.onDrop = function (eventObj, date) {
                    var $this = this;
                    // retrieve the dropped element's stored Event Object
                    var originalEventObject = eventObj.data('eventObject');
                    var $categoryClass = eventObj.attr('data-class');
                    // we need to copy it, so that multiple events don't have a reference to the same object
                    var copiedEventObject = $.extend({}, originalEventObject);
                    // assign it the date that was reported
                    copiedEventObject.start = date;
                    if ($categoryClass)
                        copiedEventObject['className'] = [$categoryClass];
                    // render the event on the calendar
                    $this.$calendar.fullCalendar('renderEvent', copiedEventObject, true);
                    // is the "remove after drop" checkbox checked?
                    if ($('#drop-remove').is(':checked')) {
                        // if so, remove the element from the "Draggable Events" list
                        eventObj.remove();
                    }
                },
                /* on click on event */
                CalendarApp.prototype.onEventClick = function (calEvent, jsEvent, view) {
                    var $this = this;
                    var form = $("<form></form>");
                    form.append("<label>修改事件名称</label>");
                    form.append("<div class='input-group'><input class='form-control' type=text value='" + calEvent.title +
                        "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> 保存</button></span></div>"
                    );
                    $this.$modal.modal({
                        backdrop: 'static'
                    });
                    $this.$modal.find('.delete-event').show().end().find('.save-event').hide().end().find('.modal-body')
                        .empty().prepend(form).end().find('.delete-event').unbind('click').click(function () {
                            $this.$calendarObj.fullCalendar('removeEvents', function (ev) {
                                return (ev._id == calEvent._id);
                            });
                            $.ajax({
                                url: "/deleteCalendar?id=" + calEvent._id,
                                type: "GET",
                                success: function (result) {
                                    if (result.success == true) {
                                        $this.$modal.modal('hide');
                                    } else {
                                        alert('删除失败,请重试!');
                                    }
                                }
                            });
                        });
                    $this.$modal.find('form').on('submit', function () {
                        debugger;
                        calEvent.title = form.find("input[type=text]").val();
                        var title = calEvent.title;
                        var beginning = calEvent.start;
                        var ending = calEvent.end;
                        var categoryClass = calEvent.className[0];
                        $.ajax({
                            url: "/createCategory?name=" + title + "&color=" + categoryClass +
                                "&type=left&start=" + beginning + "&end=" + ending,
                            type: "GET",
                            success: function (result) {
                                if (result.success == true) {

                                } else {
                                    alert('新增失败,请重试!');
                                }
                            }
                        });
                        $this.$calendarObj.fullCalendar('updateEvent', calEvent);
                        $this.$modal.modal('hide');
                        return false;
                    });
                },
                /* on select */
                CalendarApp.prototype.onSelect = function (start, end, allDay) {
                    var $this = this;
                    $this.$modal.modal({
                        backdrop: 'static'
                    });
                    var form = $("<form></form>");
                    form.append("<div class='row'></div>");
                    form.find(".row")
                        .append(
                            '<div class="form-group" style="padding-left:30px"> <label class="checkbox-inline"><input type="checkbox"  value="option1">上午</label> <label class="checkbox-inline"><input type="checkbox"  value="option2">下午</label><label class="checkbox-inline"><input type="checkbox"  value="option3">晚上</label></div>'
                           // "<div class='col-md-6'><div class='form-group'><label class='control-label'>计划时间段 如:(上午,下午,晚上)</label><input class='form-control' placeholder='输入事件名称' type='text' name='title'/></div></div>"
                        )
                        // .append(
                        //     "<div class='col-md-6'><div class='form-group'><label class='control-label'>类别</label><select class='form-control' name='category'></select></div></div>"
                        // )
                        .find("select[name='category']")
                        .append("<option value='bg-warning'>黄色</option>")
                        .append("<option value='bg-success'>绿色</option>")
                        .append("<option value='bg-primary'>蓝色</option>")
                        .append("<option value='bg-orange'>橙色</option>")
                        .append("<option value='bg-danger'>红色</option>")
                        .append("<option value='bg-purple'>紫色</option>")
                        .append("<option value='bg-cyan'>青色</option></div></div>");
                    $this.$modal.find('.delete-event').hide().end().find('.save-event').show().end().find('.modal-body')
                        .empty().prepend(form).end().find('.save-event').unbind('click').click(function () {
                            form.submit();
                        });
                    $this.$modal.find('form').on('submit', function () {
                        var title = form.find("input[name='title']").val();
                        var beginning = form.find("input[name='beginning']").val();
                        if (typeof (beginning) == "undefined") {
                            //var timestamp = Date.parse(new Date())/1000;
                            beginning = start;
                        }
                        var ending = form.find("input[name='ending']").val();
                        if (typeof (ending) == "undefined") {
                            //var timestamp = Date.parse(new Date())/1000;
                            ending = end;
                        }
                        var categoryClass = form.find("select[name='category'] option:checked").val();
                        if (title !== null && title.length != 0) {
                            $.ajax({
                                url: "/createCategory?name=" + title + "&color=" + categoryClass +
                                    "&type=left&start=" + beginning + "&end=" + ending,
                                type: "GET",
                                success: function (result) {
                                    if (result.success == true) {

                                    } else {
                                        alert('新增失败,请重试!');
                                    }
                                }
                            });

                            $this.$calendarObj.fullCalendar('renderEvent', {
                                title: title,
                                start: start,
                                end: end,
                                allDay: false,
                                className: categoryClass
                            }, true);
                            $this.$modal.modal('hide');
                        } else {
                            alert('请输入事件名称');
                        }
                        return false;

                    });
                    $this.$calendarObj.fullCalendar('unselect');
                },
                CalendarApp.prototype.enableDrag = function () {
                    //init events
                    $(this.$event).each(function () {
                        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                        // it doesn't need to have a start or end
                        var eventObject = {
                            title: $.trim($(this).text()) // use the element's text as the event title
                        };
                        // store the Event Object in the DOM element so we can get to it later
                        $(this).data('eventObject', eventObject);
                        // make the event draggable using jQuery UI
                        $(this).draggable({
                            zIndex: 999,
                            revert: true, // will cause the event to go back to its
                            revertDuration: 0 //  original position after the drag
                        });
                    });
                }
            /* Initializing */
            CalendarApp.prototype.init = function () {
                    this.enableDrag();
                    /*  Initialize the calendar  */
                    var date = new Date();
                    var d = date.getDate();
                    var m = date.getMonth();
                    var y = date.getFullYear();
                    var form = '';
                    var today = new Date($.now());
                    var defaultEvents = new Array();
                    var $this = this;
                    // $.ajax({
                    // 	url: "/getCalendarList",
                    // 	type: "GET",
                    // 	async:false, 
                    // 	success:function (result){
                    // 		if(result!=null && result.list!=null){
                    // 			for(var i=0 ; i<result.list.length;i++){
                    // 				var category = result.list[i];
                    // 				if(category.type=="left"){
                    // 					var obj=new Object();
                    // 					obj.id=category.id;
                    // 					obj.title=category.name;
                    // 					if(null!=category.calStart){
                    // 						obj.start=category.calStart;
                    // 					}else{
                    // 						obj.start=today;
                    // 					}
                    // 					if(null!=category.calEnd){
                    // 						obj.end=category.calEnd;
                    // 					}else{
                    // 						obj.end=today;
                    // 					}
                    // 					obj.className=category.color;
                    // 					defaultEvents.push(obj);
                    // 				}else{
                    //                     var categoryName = category.name;
                    //                     var categoryColor = category.color;
                    //                     $this.$extEvents.append('<div data-id="'+category.id+'" class="external-event ' + categoryColor + '" data-class="' + categoryColor + '" style="position: relative;"><i class="fa fa-move"></i>' + categoryName + '</div>');
                    //                     $this.enableDrag();
                    // 				}

                    // 			}
                    // 		}
                    // 	}
                    // });
                    var defaultEvents = [{
                        title: '上午 9:00--12:00',
                        start: new Date($.now() + 158000000),
                        className: 'bg-purple'
                    }, {
                        title: '上午 9:00--12:00',
                        start: today,
                        className: 'bg-purple'
                    }, {
                        title: '下午 13:00--17:00',
                        start: today,
                        end: today,
                        className: 'bg-danger'
                    }, {
                        title: '晚上 19:00--21:00',
                        start: new Date($.now() + 338000000),
                        className: 'bg-primary'
                    }];


                    $this.$calendarObj = $this.$calendar.fullCalendar({
                        slotDuration: '00:10:00',
                        /* If we want to split day time each 15minutes */
                        minTime: '08:00:00',
                        maxTime: '21:00:00',
                        defaultView: 'month',
                        handleWindowResize: true,
                        height: 1000,
                        header: {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month', //,agendaDay'
                        },
                        buttonText: {
                            today: '今天',
                            month: '月视图',
                            week: '周视图',
                            day: '日视图'
                        },
                        allDayText: "全天",
                        closeText:"关闭",
                        prevText:"&#x3C;上月",
                        nextText:"下月&#x3E;",
                        currentText:"今天",
                        monthNames:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                        monthNamesShort:["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                        dayNames:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
                        dayNamesShort:["周日","周一","周二","周三","周四","周五","周六"],
                        dayNamesMin:["日","一","二","三","四","五","六"],
                        weekHeader:"周",
                        dateFormat:"yy-mm-dd",
                        //#region 鼠标放上去显示信息
                        eventMouseover: function (calEvent, jsEvent, view) {
                            //var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
                            //var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
                            //$(this).attr('title', fstart + " - " + fend + " " + calEvent.fullname);
                            //鼠标悬浮到title的时候可以设置展现哪些信息

                            $(this).attr('title', calEvent.title);
                            //$(this).css('font-weight', 'normal');
                            /* $(this).tooltip({
                                effect: 'toggle',
                                cancelDefault: true
                            }); */
                        },
                        events: defaultEvents,
                        editable: true,
                        droppable: true, // this allows things to be dropped onto the calendar !!!
                        eventLimit: true, // allow "more" link when too many events
                        selectable: true,
                        drop: function (date) {
                            $this.onDrop($(this), date);
                        },
                        select: function (start, end, allDay) {
                            $this.onSelect(start, end, allDay);
                        },
                        eventClick: function (calEvent, jsEvent, view) {
                            $this.onEventClick(calEvent, jsEvent, view);
                        },

                    });

                    //on new event 新增右边分类
                    this.$saveCategoryBtn.on('click', function () {
                        var categoryName = $this.$categoryForm.find("input[name='category-name']").val();
                        var categoryColor = $this.$categoryForm.find("select[name='category-color']").val();
                        if (categoryName !== null && categoryName.length != 0) {

                            $.ajax({
                                url: "/createCategory?name=" + categoryName + "&color=" + categoryColor +
                                    "&type=right",
                                type: "GET",
                                success: function (result) {
                                    if (result.success == true) {
                                        $this.$extEvents.append('<div class="external-event ' +
                                            categoryColor + '" data-class="' + categoryColor +
                                            '" style="position: relative;"><i class="fa fa-move"></i>' +
                                            categoryName + '</div>');
                                        $this.enableDrag();
                                    } else {
                                        alert('新增失败,请重试!');
                                    }

                                }
                            });
                        }
                    });
                },

                //init CalendarApp
                $.CalendarApp = new CalendarApp, $.CalendarApp.Constructor = CalendarApp

        }(window.jQuery),

        jQuery(document).ready(function ($) {
            "use strict";
            $.CalendarApp.init();

            $('#contentDiv').find('li').each(function () {
                $(this).click(function () {
                    var index=$(this).index();
                        if(index==0){
                            window.location.href="patientlibrary.html";
                        }else if(index==1){
                            window.location.href="appointlist.html";
                        }else if(index==2){
                            window.location.href="workplan.html";
                        // }else if(index==3){
                        //     window.location.href="workplan.html";
                        }else if(index==3){
                            window.location.href="usercenter.html";
                        }else if(index==4){
                            window.location.href="medicalservice.html";
                        }else if(index==5){
                            window.location.href="./im/main.html";
                        }else if(index==7){

                        }else if(index==8){

                        }else if(index==9){

                        }
                })
            });
        });
    </script>


</body>

</html>